<template>
	<view
		:class="[
			'container top-padding-container',
			roleType === 'seeker' ? 'seeker' : 'solver',
		]"
	>
		<up-loading-page
			:loading="loading"
			loading-text="请稍后..."
		></up-loading-page>
		<view class="back-btn-box" @click="backToPrevPage">
			<up-icon name="arrow-left" color="#fff" size="18"></up-icon>
		</view>
		<view class="bg-rectangle"></view>
		<view class="header-box">
			<text class="hello-text">Hello !</text>
			<view class="header-sub">欢迎来到有解，获取更多机会</view>
		</view>
		<view class="login-box">
			<view class="login-box-bg"></view>
			<view class="login-btn-box">
				<up-button
					:color="roleType === 'seeker' ? '#f36c23' : '#00cb6b'"
					:disabled="!agreeProtocol"
					shape="circle"
					text="微信小程序一键登录"
					open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="getAuthorization"
				></up-button>
				<view class="agree-protocol-box">
					<up-checkbox
						label="我已阅读并同意《有解用户隐私协议》"
						:activeColor="roleType === 'seeker' ? '#f36c23' : '#00cb6b'"
						shape="circle"
						labelSize="12"
						name="agree"
						usedAlone
						v-model:checked="agreeProtocol"
					></up-checkbox>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { useUserStore } from "@/store/modules/user";
import { setToken } from "@/utils/token";
import API from "@/api/index";

// 解决样式隔离问题，不然uview-plus无法给ui组件自定义class
defineOptions({
	options: {
		styleIsolation: "shared",
	},
});

const userStore = useUserStore();

interface QueryType {
	path: string;
	type: string;
}

// 跳转过来的页面路径和类型
const jumpQuery = ref<QueryType>({
	path: "",
	type: "",
});

// 是解决者还是求解者
const roleType = ref<IndentityTypeLowerCase>("solver");

// 是否同意用户协议
const agreeProtocol = ref(false);

// 加载中的状态
const loading = ref(false);

onLoad((query) => {
	jumpQuery.value = query as QueryType;
	if (jumpQuery.value.type === "seeker") {
		roleType.value = "seeker";
	} else {
		roleType.value = "solver";
	}
});

// 注册
const register = (registerParam: API.RegisterParam) => {
	API.user
		.queryRegister(registerParam)
		.then((res) => {
			setToken(res.data?.token || "");
			loading.value = false;
		})
		.catch(() => {
			loading.value = false;
		});
};

const getUserInfo = () => {
	API.user
		.queryMe()
		.then((res) => {
			if (res.data) {
				loading.value = false;
				const { heresolverType, username, membershipStatus } = res.data;
				userStore.setUserInfo({
					userType: heresolverType,
					userName: username,
					membershipStatus: membershipStatus,
				});
				backToPrevPage();
			}
		})
		.catch(() => {
			loading.value = false;
		});
};

// 获取到code后请求后端服务，看这个用户是否已经在数据库中了，如果不在则需要注册
const loginWithCode = (body: API.LoginParam) => {
	API.user
		.queryLoginWithCode(body)
		.then((res) => {
			if (res.data) {
				setToken(res.data.token);
				userStore.setUserInfo({
					userId: res.data.userId,
				});
				getUserInfo();
			}
		})
		.catch((res) => {
			if (res.statusCode === 404) {
				uni.getUserInfo({
					provider: "weixin",
					success: (userInfoRes) => {
						const registerParams: API.RegisterParam = {
							openId: res.data.openId,
							username: userInfoRes.userInfo.nickName,
							heresolverType: "SOLVER",
							encryptedData: userInfoRes.encryptedData,
							iv: userInfoRes.iv,
							validityDays: 30,
						};
						register(registerParams);
					},
				});
			}
		});
};

const getAuthorization = () => {
	loading.value = true;
	uni.login({
		provider: "weixin",
		success: (res) => {
			loginWithCode({
				code: res.code,
				validityDays: 30,
			});
		},
		fail: () => {
			loading.value = false;
		},
	});
};

// 跳转到上一个页面
const backToPrevPage = () => {
	uni.navigateBack();
};
</script>

<style lang="scss">
$whiteBg: #fff;
$paddingLeft: 45rpx;
.container {
	position: relative;
	width: 100vw;
	height: 100vh;

	&.seeker {
		background-color: #f36c23;

		.login-box-bg {
			background-image: radial-gradient(
					circle at top left,
					rgba(250, 125, 58, 0.15),
					transparent
				),
				radial-gradient(
					circle at top right,
					rgba(233, 255, 135, 0.15),
					transparent
				);
		}
	}

	&.solver {
		background-color: #00cb6b;

		.login-box-bg {
			background-image: radial-gradient(
					circle at top left,
					rgba(61, 215, 142, 0.15),
					transparent
				),
				radial-gradient(
					circle at top right,
					rgba(233, 255, 135, 0.15),
					transparent
				);
		}
	}

	.back-btn-box {
		position: absolute;
		top: 55px;
		left: 0;
		z-index: 100;
		padding-left: $paddingLeft;
	}

	.bg-rectangle {
		position: absolute;
		top: -10%;
		left: -30%;
		width: 40%;
		height: 90%;
		background-image: linear-gradient(
			to bottom,
			rgba(255, 255, 255, 0.15),
			transparent
		);
		transform: rotate(-46.4deg);
		transform-origin: top;
	}

	.header-box {
		position: absolute;
		top: 15%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
		padding-left: $paddingLeft;
		color: $whiteBg;
		background-color: transparent;
		box-sizing: border-box;
		.hello-text {
			display: block;
			font-size: 2rem;
			font-weight: bolder;
		}
		.header-sub {
			font-size: 1rem;
			margin-top: 0.75rem;
			letter-spacing: 2px;
		}
	}

	.login-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 75%;
		border-radius: 45rpx 45rpx 0 0;
		background-color: $whiteBg;

		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 45rpx 45rpx 0 0;
		}

		.login-btn-box {
			position: absolute;
			top: 30%;
			left: 0;
			transform: translateY(-50%);
			width: 100%;
			padding: $base-padding;
		}

		.agree-protocol-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			width: 100%;
			margin-top: 45rpx;
			text-align: center;
			font-size: 10px;
			color: #999;
		}
	}
}
</style>
